<template>
  <div class="pagination flex flex-ac flex-jsb">
    <div class="flex">
      <el-pagination
        hide-on-single-page
        background
        :layout="hide?'prev, pager, next, slot':'prev, pager, next, slot, jumper'"
        :total="total"
        :page-size.sync="pageSize"
        :current-page.sync="tmpVal"
        :pager-count="pagerCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <span v-if="!hide" class="pagination-jumper">共{{ pages(total) }}页，</span>
        <span v-if="!hide" class="pagination-tips">每页显示{{pageSize}}个/共{{ total }}个，</span>
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "GoPage",
  props: {
    hide: {
      type: Boolean,
      default: false
    },
    size: String,
    value: Number,
    pagerCount: {
      type: Number,
      default: 7
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 10
    },
    datas: {
      type: Array,
      default() {
        const tmp = [];
        tmp.length = 100;
        return tmp;
      }
    }
  },
  computed: {
    tmpVal: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit("input", newVal);
      }
    }
  },
  methods: {
    pages(val) {
      return Math.ceil(val / this.pageSize);
    },
    handleSizeChange(val) {
      this.$emit("pagination", { page: this.currentPage, limit: val });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      this.$emit("pagination", { page: val, limit: this.pageSize });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.pagination {
  &.mini {
    .pagination-tips {
      font-size: 10px;
    }
    .pagination-jumper {
      font-size: 10px;
    }
    /deep/ {
      .el-pagination__jump {
        font-size: 10px;
        height: 22px;
        line-height: 22px;
        input {
          width: 32px;
          height: 22px;
          line-height: 22px;
          font-size: 10px;
          background: rgba(255, 255, 255, 1);
          border-radius: 8px;
          border: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
      .el-pagination.is-background .el-pager li:not(.disabled) {
        width: 26px;
        height: 26px;
        min-width: 26px;
        padding: 0;
        border-radius: 50%;
        background: transparent;
        font-weight: 500;
        color: rgba(147, 153, 159, 1);
        line-height: 24px;
        border: 1px solid rgba(214, 219, 224, 1);
        transition: all 0.3s linear;
        &.active,
        &:hover {
          color: #fff;
          background: linear-gradient(
            225deg,
            rgba(34, 115, 232, 1) 0%,
            rgba(54, 170, 255, 1) 100%
          );
          box-shadow: 0px 2px 3px 0px rgba(54, 170, 255, 0.3);
        }
      }
      .el-pagination.is-background .el-pager li:not(.disabled) {
        width: 34px;
        height: 34px;
        border-radius: 18px;
        background: transparent;
        font-weight: 500;
        color: rgba(147, 153, 159, 1);
        line-height: 34px;
        border: 1px solid rgba(214, 219, 224, 1);
        transition: all 0.3s linear;
        &.active,
        &:hover {
          color: #fff;
          background: #333333;
        }
      }
      .el-pagination.is-background .btn-next {
        @include wh(68, 68);
        @include bg("~@/assets/images/button/2_1fyly@2x.png");
        transform: rotate(180deg);
        .el-icon {
          display: none;
        }
        &:disabled {
          transform: rotate(180deg);
          @include bg("~@/assets/images/button/2_1fylh@2x.png");
        }
      }
      .el-pagination.is-background .btn-prev {
        @include wh(68, 68);
        @include bg("~@/assets/images/button/2_1fyly@2x.png");
        .el-icon {
          display: none;
        }
        &:disabled {
          @include bg("~@/assets/images/button/2_1fylh@2x.png");
        }
      }
    }
  }
  /deep/ {
    .el-pagination {
      padding: 0;
      display: flex;
      align-items: center;
    }
    .el-pagination.is-background .el-pager li:not(.disabled) {
      width: 34px;
      height: 34px;
      border-radius: 18px;
      background: transparent;
      font-weight: 500;
      color: rgba(147, 153, 159, 1);
      line-height: 34px;
      border: 1px solid rgba(214, 219, 224, 1);
      transition: all 0.3s linear;
      &.active,
      &:hover {
        color: #fff;
        background: #333333;
      }
    }
    .el-pagination.is-background .btn-next {
      @include wh(68, 68);
      @include bg("~@/assets/images/button/2_1fyly@2x.png");
      transform: rotate(180deg);
      .el-icon {
        display: none;
      }
      &:disabled {
        transform: rotate(0);
        @include bg("~@/assets/images/button/2_1fyrh@2x.png");
      }
    }
    .el-pagination.is-background .btn-prev {
      @include wh(68, 68);
      @include bg("~@/assets/images/button/2_1fyly@2x.png");
      .el-icon {
        display: none;
      }
      &:disabled {
        @include bg("~@/assets/images/button/2_1fylh@2x.png");
      }
    }
    .el-pagination__jump {
      color: #818899;
      font-size: 14px;
      height: 32px;
      margin-left: 0;
      input {
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        line-height: 32px;
        width: 46px;
        margin: 0 6px 0 4px;
        padding: 0 8px;
        box-sizing: border-box;
      }
    }
  }
  .pagination-jumper {
    margin-left: 16px;
    font-size: 14px;
    font-weight: normal;
    color: rgba(129, 136, 153, 1);
  }
  &-tips {
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(129, 136, 153, 1);
  }
}
</style>
